<template>
  <div class="vpc-network-overviews vpc-network-firewall">
    <el-row :gutter="12">
      <el-col :span="24">
        <div class="vpc-firewall-common">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane
              v-for="[key, tab] in Object.entries(TAB_OPTIONS)"
              :key="key"
              :label="tab.label"
              :name="tab.key"
            >
              <component
                :is="tab.component"
                :vpcNode="vpcNode"
                v-if="loadedTabs[tab.key]"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue';
import AccessControl from './accessControl/index.vue';
import SourceNat from './sourceNat/index.vue';
import PortMapping from './portMapping/index.vue';
import InboundStrategy from './inboundStrategy/index.vue';

const TAB_OPTIONS = {
  ACCESS_CONTROL: {
    label: '访问控制',
    key: 'access-control',
    component: AccessControl,
  },
  SOURCE_NAT: {
    label: '源NAT',
    key: 'source-nat',
    component: SourceNat,
  },
  PORT_MAPPING: {
    label: '端口映射',
    key: 'port-mapping',
    component: PortMapping,
  },
  INBOUND_STRATEGY: {
    label: '入站策略',
    key: 'inbound-strategy',
    component: InboundStrategy,
  },
};

const activeName = ref(TAB_OPTIONS.ACCESS_CONTROL.key);
const loadedTabs = reactive({
  [TAB_OPTIONS.ACCESS_CONTROL.key]: true,
}); // 记录哪些标签的数据已经被加载

const vpcNode = ref(null);
// 节点数据
const props = defineProps({
  vpcNode: null,
});

// 处理标签点击事件
function handleTabClick(tab) {
  const tabKey = tab.paneName;
  if (!loadedTabs[tabKey]) {
    loadedTabs[tabKey] = true;
  }
}

// 监听传递过来的节点数据
watch(
  () => props.vpcNode,
  val => {
    vpcNode.value = val;
  },
  { immediate: true },
);
</script>

<style lang="scss" scoped>
.vpc-network-overviews {
  padding-left: 12px;

  .vpc-firewall-common {
    border: 1px solid #e4e7ed;
    //box-shadow: 0 0 12px rgba(0,0,0,0.12);
    border-radius: 4px;
    height: calc(100vh - 340px);
    margin-top: 12px;

    .el-tabs {
      :deep(.el-tabs__nav-scroll) {
        padding: 6px 20px 16px;
      }
    }
  }
}
</style>
